<template>
  <div class="content">
    <div class="cloud-header">
      <h2>应用管理</h2>
    </div>
    <div class="cloud-body">
      <div class="cloud-subset-title">
        <div class="cloud-subset-action">
          <Button color="green" v-popup.newApply>添加</Button>
        </div>
        <p class="cloud-subset-tips">在开发的场景同，通常一个项目管理多个应用，如微信公众号，微信小程序，数据后台等等公用的一个数据库，此处用于区分不同应用场景<br></p>
      </div>
      <div class="cloud-applinks">
        <Skeleton active :loading="loading">
          <ul class="cloud-applinks-list">
            <li class="cloud-applinks-item" v-for="(item, index) in apply" :key="index">
              <div class="cloud-applinks-inner">
                <div class="cloud-applinks-action">
                  <div class="cloud-applinks-status"> 已关联 </div>
                </div>
                <div class="cloud-applinks-info">
                  <i class="cloud-applinks-avatar icon iconfont " :class="`icon-${item.model || 'app'}`"></i>
                  <strong class="cloud-applinks-name" :title="item.title">{{item.title}}</strong>
                </div>
                <div class="cloud-applinks-mask">
                  <a href="javascript:;" :id="item.name" v-popup.applyInfo="item">详情</a>
                </div>
              </div>
            </li>
          </ul>
        </Skeleton>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      loading: true,
      apply: {}
    };
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    this.handleApplyInfo();
  },
  methods: {
    handleApplyInfo() {
      this.$cloud.apply().get(this.$cloud.AppID).then(res => {
        console.log('res.config.apply', res.config.apply);
        this.apply = res.config.apply;
        this.loading = false;
      }).catch(error => {
        console.log('错误', error);
      });
    }
  }
};

</script>
<style type="text/css">
</style>
